<template>
  
  <img :v-if="props.form.type==0" :src="props.form.type==0 ? props.form.uri : '' " class="picture" />
  <video :src="props.form.type==1 ? props.form.uri : '' " controls class="picture" :style="videoStyle">
      您的浏览器不支持 video 标签。
  </video>
  
	<el-upload
            action="#"
            :show-file-list="false"
            :before-upload="beforeUpload"
			:http-request="customUpload"
          >
            <el-button >
              选择文件
              <el-icon class="el-icon--right"><Upload /></el-icon>
            </el-button>
    </el-upload>
    
  
</template>

<script setup>
import "vue-cropper/dist/index.css"
import { VueCropper } from "vue-cropper"
import { uploadAvatar,uploadFile } from "@/api/system/user"
import useUserStore from "@/store/modules/user"
import { watch } from "vue"


const userStore = useUserStore()
const { proxy } = getCurrentInstance()

const open = ref(false)
const visible = ref(false)
const title = ref("修改头像")
const videoStyle=ref({display: 'none'})


const emit = defineEmits(['update-type','update-uri'])
const props = defineProps(['form']);

watch(() => props.form, (newValue, oldValue) => {
  if(newValue.type==1 ){
    videoStyle.value={display: 'block'}
  }else{
    videoStyle.value={display: 'none'}
  }
}, { deep: true,immediate: true })

/** 覆盖默认上传行为 */
function customUpload(option){
    let formData = new FormData()
	formData.append("file", option.file)
	uploadFile(formData).then(response => {
      emit('update-uri',response.data.url)
      if(option.file.type.indexOf("video/") == -1){
		emit('update-type', 0)
	  }else{
	    emit('update-uri',response.data.url)
		emit('update-type', 1)
	  }
	})
}


/** 上传预处理 */
function beforeUpload(file) {
  console.log("type",file.type)

  if (file.type.indexOf("image/") == -1 && file.type.indexOf("video/") == -1 ) {
    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
	return false
  } 
  
}


</script>

<style lang='scss' scoped>
.picture {
  width:100%;
}
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
</style>